﻿    {{ extend './layout/main.html'}}   
    {{block 'title'}}我的音乐列表{{/block}} 
    {{block 'headercss'}}
    <link href="/public/css/index.css" rel="stylesheet" type="text/css" />
    {{/block}}
    {{block 'content'}}
    <div class="container">
        <div class="page-header">
            <h1>首页--<small>我的音乐</small></h1>
        </div>
        <a href="/music/add-music" class="btn btn-success">添加音乐</a>
    </div>
    <div class="container">
       <div class="row" style="display: flex;">
            <div style="flex: 3; margin-right: 10px;">
                <table class="table table-striped table-hover">
                    <thead>
                        <th>编号</th>
                        <th>歌曲标题</th>
                        <th>时长</th>
                        <th>歌手</th>
                        <th>编辑</th>
                        <th>删除</th>
                        <th>播放</th>
                    </thead>
                    <tbody class="list_container" id="list_container">
                        <tr v-for="(value,index) in musicList" :key="index">
                            <td v-text="index+1"></td>
                            <td v-text="value.title"></td>
                            <td v-text="value.singer">刘德华</td>
                            <td v-text="value.time"></td>
                            <td><a v-on:click.stop.prevent="edit(value)">编辑</a></td>
                            <td><a class="del" v-on:click.stop.prevent="deleteMusic(value.uid,value.mid)">删除</a></td>
                            <td><span style="cursor:pointer" class="glyphicon glyphicon-play-circle ply" v-on:click.stop.prevent="play(value.file,value.filelrc)"></span></td>
                        </tr>            
                    </tbody>
                </table>
            </div>
            <div style="flex: 2">
                <p>正在播放音乐:</p>
                <audio controls id="music1" :src= "myaudio.file" ref="player" @timeupdate="updateLyric">
                    您的浏览器不支持 audio 元素。
                </audio>
                <div id="box" class="col-md-3 lyric_wrap bbs">
                    <ul id="lyric">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    {{/block}}
    {{block 'vue'}}
        <script>
            var text_temp;
            function locationLrc(lrc){
                $(".lyric_wrap").find(".lyric_wrap .on").removeClass("on");
                var li = $(".lyric_wrap").find("li:nth-child("+(lrc.index+1)+")");
                li.addClass("on").siblings().removeClass("on");
                var top = Math.min(0,-lrc.top);
                //lyric.css({"-webkit-transform":"translate(0,-"+lrc.top+"px)"});
                $("#lyric").css({"margin-top":top});
            }
            new Vue({
                el:"#app",
                data:{
                    musicList:[],
                    myaudio:{
                        file:"",
                        filelrc:"",
                    },
                   
                    audio:null
                },
                methods:{
                    // 获取用户音乐列表
                    getUsrlist() {
                        let _this= this;
                        axios.get('/user/usermusic', {
                            params: {
                            
                            }
                        })
                        .then(function (response) {
                            let {data,msg,error} = (response.data);
                            if(!error){
                                data.forEach(element => {
                                    element.time = s_to_hs(element.time)
                                });
                                _this.musicList = data;
                            }else{
                                window.alert(msg)
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                        
                    },
                    // 编辑音乐
                    edit(v) {
                        window.location.href = "/music/editedmusic?mid="+v.mid;
                    },
                    // 删除音乐
                    deleteMusic(uid,mid) {
                        let _this = this;
                        if(confirm("确定删除这首音乐吗")){
                            axios.delete('/api/delMusic/'+uid+'/'+mid, {
                                
                            })
                            .then(function (response) {
                                let {erron,msg} = response.data
                                if(!erron){
                                    _this.getUsrlist();
                                }else{
                                    window.alert(msg);
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                        }
                        else{
                            return;
                        }
                    },
                    play(file,filesrc) {
                        let _this = this;
                        $("#music1").attr("src","");
                        $("li").empty();
                        $("#lyric").css("marginTop",0);
                        for(var key in mystore.storage){
                            mystore.destroy(key);
                        }
                        axios.get(filesrc, {
                            params: {
                                
                            }
                        })
                        .then(function (response) {
                            let objLrc = _this.parseLyric(response.data)
                            _this.renderLyric(objLrc,_this.audio);
                            $("#music1").attr("src",file);
                            $("#music1")[0].play();

                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    },
                    parseLyric(lrc){
                        var lyrics = lrc.split("\n");
                        var lrcObj = {};
                        for(var i=0;i<lyrics.length;i++){
                            var lyric = decodeURIComponent(lyrics[i]);
                            var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
                            var timeRegExpArr = lyric.match(timeReg);
                            if(!timeRegExpArr)continue;
                            var clause = lyric.replace(timeReg,'');
                            for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
                                var t = timeRegExpArr[k];
                                var min = Number(String(t.match(/\[\d*/i)).slice(1)),
                                    sec = Number(String(t.match(/\:\d*/i)).slice(1));
                                var time = min * 60 + sec;
                                lrcObj[time] = clause;
                            }
                        }
                        return lrcObj;
                    },
                    renderLyric(musicslrc){
                        $("#lyric").html("");
                        var lyricLineHeight = 28,
                            offset = $(".lyric_wrap").offset().top*0.4;
                        var i = 0;
                        for(var k in musicslrc){
                            var txt = musicslrc[k];
                            if(!txt)txt = "&nbsp;";
                            mystore.set(k,{
                                index:i++,
                                text:txt,
                                top: i*lyricLineHeight-offset
                            });
                            var li = $("<li>"+txt+"</li>");
                            var lis = $(".lyric_wrap").find("li:first-child");
                            lis.addClass("on").siblings().removeClass("on");
                            $("#lyric").append(li);
                        }
                        let musci = $("#music1")[0];
                    },
                    updateLyric(event){
                        var data = mystore.storage;
                        if(!data)return;
                        var currentTime = Math.round(event.target.currentTime);
                        if(!currentTime)return;
                        var lrc = null;
                        for (const key1 in data) {
                            if(key1==currentTime){
                               if(!key1) continue;
                               lrc = data[key1];
                            }
                        }
                        if(!lrc)return;
                        var text = lrc.text;
                        if(text != text_temp){
                            locationLrc(lrc);
                            text_temp = text;
                        }
                    },
                    
                },
                computed:{
                   
                },
                mounted(){
                   this.audio = $("#music1")[0];
                  
                },
                created(){
                    this.getUsrlist();
                }
            })
        </script>
    {{/block}}
